p5.js 三角関数 1

三角関数の基礎

code: sin_base.js

let last_x;

let last_y;

let a = 1;

let inc = 1;

function setup() {

createCanvas(400, 400);

smooth();

noLoop();

}

function draw() {

background(220);

angleMode(DEGREES)

for (let i = 0; i < width; i += 0.2) {

line(i, sin(a)*100 +200, last_x, last_y + 200);

last_x = i;

last_y = sin(a)*100

a = a + inc;

}

}

サイン

code:sin.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

angleMode(DEGREES)

let a = 5;

let inc = 5;

for (let i = 0; i < width; i++) {

line(i * 3, 200, i * 3, 200 + sin(a) * 100.0);

a = a + inc;

}

}

コサイン

code:cos.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

angleMode(DEGREES)

let a = 5;

let inc = 5;

for (let i = 0; i < width; i++) {

line(i * 3, 200, i * 3, 200 + cos(a) * 100.0);

a = a + inc;

}

}

タンジェント

code:　tan.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

angleMode(DEGREES)

let a = 5;

let inc = 5;

for (let i = 0; i < width; i++) {

line(i * 3, 200, i * 3, 200-tan(a)*10);

a = a + inc;

}

}

参考文献

p5.js Reference

「Processingをはじめよう 第2版」

『Processing　ビジュアルデザイナーとアーティストのためのプログラミング入門』

『ジェネラティブ・アート Processingによる実践ガイド』

https://gyazo.com/60a7f5316e6e1a29235000282fd66795